<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>缩放</title>
    <style>
      .outer {
        width: 200px;
        height: 200px;
        border: 2px solid black;
        margin: 0 auto;
        margin-top: 100px;
      }
      .son {
        width: 200px;
        height: 200px;
        background-color: deepskyblue;
        /* 这里和translate 是一样的用法 只不过 scale写一个值在水平和垂直上都可以用 可以给负值 直接将元素 旋转压缩 不能用于行内元素 */
        /*transform: scaleX(1.5) scaleY(1.5);*/
        transform: scale(1.5);
      }
      /* 实现字体的缩小 小于浏览器所能接收的最小大小*/
      span {
          font-size: 20px;
          display: block;
          transform: scale(0.5);
      }
    </style>
</head>
<body>
  <div class="outer">
    <div class="son">你好啊</div>
  </div>
  <span>好</span>
</body>
</html>